表单布局

layout(布局参数)

版本更新内容
1.3.0支持指定不同分辨率下的宽度

从公测版2017-01-20开始，表单构建器支持简单的布局，如果需要复杂的布局方式，需要自己写模板

比如表单页面如下：

  1.         // 显示编辑页面
  2.         return ZBuilder::make('form')
  3.             ->addFormItems([
  4.                 ['hidden', 'id'],
  5.                 ['select', 'pid', '所属栏目', '<span class="text-danger">必选</span>', ColumnModel::getTreeList($id)],
  6.                 ['text', 'name', '栏目名称', '<span class="text-danger">必填</span>'],
  7.                 ['radio', 'model', '内容模型', '<span class="text-danger">必选</span>', DocumentModel::getTitleList()],
  8.                 ['radio', 'type', '栏目属性', '', ['最终列表栏目', '外部链接'], 0],
  9.                 ['text', 'url', '链接', '可以填写完整的url，如：<code>http://www.dolphinphp.com</code>，也可以填写 <code>模块/控制器/操作</code>，如：<code>cms/index/index</code>'],
  10.                 ['radio', 'target', '打开方式', '', ['_self' => '当前窗口', '_blank' => '新窗口'], '_self'],
  11.                 ['select', 'list_template', '列表页模板', '可选，模板目录： <code>cms/view/column</code>', parse_array($template_list)],
  12.                 ['select', 'detail_template', '详情页模板', '可选，模板目录： <code>cms/view/document</code>', parse_array($template_detail)],
  13.                 ['ckeditor', 'content', '栏目内容', '可作为单页使用'],
  14.                 ['icon', 'icon', '图标'],
  15.                 ['radio', 'post_auth', '是否支持投稿', '是否允许前台用户投稿', ['禁止投稿', '允许投稿']],
  16.                 ['radio', 'hide', '是否隐藏栏目', '隐藏后前台不可见', ['显示', '隐藏'], 0],
  17.                 ['select', 'rank_auth', '浏览权限', '', RoleModel::getTree(null, '开放浏览')],
  18.                 ['radio', 'status', '立即启用', '', ['否', '是']],
  19.                 ['text', 'sort', '排序'],
  20.             ])
  21.             ->setFormData($info)
  22.             ->fetch();

默认情况下是每一个表单项独占一行

表单布局 - 图1

我们可以用layout来设置各个表单项所占的宽度，比如：

  1.         // 显示编辑页面
  2.         return ZBuilder::make('form')
  3.             ->addFormItems([
  4.                 ['hidden', 'id'],
  5.                 ['select', 'pid', '所属栏目', '<span class="text-danger">必选</span>', ColumnModel::getTreeList($id)],
  6.                 ['text', 'name', '栏目名称', '<span class="text-danger">必填</span>'],
  7.                 ['radio', 'model', '内容模型', '<span class="text-danger">必选</span>', DocumentModel::getTitleList()],
  8.                 ['radio', 'type', '栏目属性', '', ['最终列表栏目', '外部链接'], 0],
  9.                 ['text', 'url', '链接', '可以填写完整的url，如：<code>http://www.dolphinphp.com</code>，也可以填写 <code>模块/控制器/操作</code>，如：<code>cms/index/index</code>'],
  10.                 ['radio', 'target', '打开方式', '', ['_self' => '当前窗口', '_blank' => '新窗口'], '_self'],
  11.                 ['select', 'list_template', '列表页模板', '可选，模板目录： <code>cms/view/column</code>', parse_array($template_list)],
  12.                 ['select', 'detail_template', '详情页模板', '可选，模板目录： <code>cms/view/document</code>', parse_array($template_detail)],
  13.                 ['ckeditor', 'content', '栏目内容', '可作为单页使用'],
  14.                 ['icon', 'icon', '图标'],
  15.                 ['radio', 'post_auth', '是否支持投稿', '是否允许前台用户投稿', ['禁止投稿', '允许投稿']],
  16.                 ['radio', 'hide', '是否隐藏栏目', '隐藏后前台不可见', ['显示', '隐藏'], 0],
  17.                 ['select', 'rank_auth', '浏览权限', '', RoleModel::getTree(null, '开放浏览')],
  18.                 ['radio', 'status', '立即启用', '', ['否', '是']],
  19.                 ['text', 'sort', '排序'],
  20.             ])
  21.             ->setFormData($info)
  22.             ->layout(['pid' => 6, 'name' => 6, 'model' => 6, 'type' => 6])
  23.             ->fetch();

那么最终界面如下;

表单布局 - 图2

layout方法接受一个数组，键是对应的表单项名，值为所占的宽度，和bootstrap的布局一致，一共可以设置1-12个单元格，具体的大家可以按自己的需求调整。

添加表单项时设置布局参数

从1.0.2开始，表单布局支持以下方式

在添加表单项时，直接在表单项类型后面添加布局宽度，用英文冒号（:）隔开。

  1.         // 显示编辑页面
  2.         return ZBuilder::make('form')
  3.             ->addFormItems([
  4.                 ['hidden', 'id'],
  5.                 ['select:6', 'pid', '所属栏目', '<span class="text-danger">必选</span>', ColumnModel::getTreeList($id)],
  6.                 ['text:6', 'name', '栏目名称', '<span class="text-danger">必填</span>'],
  7.                 ['radio:6', 'model', '内容模型', '<span class="text-danger">必选</span>', DocumentModel::getTitleList()],
  8.                 ['radio:6', 'type', '栏目属性', '', ['最终列表栏目', '外部链接'], 0],
  9.                 ['text', 'url', '链接', '可以填写完整的url，如：<code>http://www.dolphinphp.com</code>，也可以填写 <code>模块/控制器/操作</code>，如：<code>cms/index/index</code>'],
  10.                 ['radio', 'target', '打开方式', '', ['_self' => '当前窗口', '_blank' => '新窗口'], '_self'],
  11.                 ['select', 'list_template', '列表页模板', '可选，模板目录： <code>cms/view/column</code>', parse_array($template_list)],
  12.                 ['select', 'detail_template', '详情页模板', '可选，模板目录： <code>cms/view/document</code>', parse_array($template_detail)],
  13.                 ['ckeditor', 'content', '栏目内容', '可作为单页使用'],
  14.                 ['icon', 'icon', '图标'],
  15.                 ['radio', 'post_auth', '是否支持投稿', '是否允许前台用户投稿', ['禁止投稿', '允许投稿']],
  16.                 ['radio', 'hide', '是否隐藏栏目', '隐藏后前台不可见', ['显示', '隐藏'], 0],
  17.                 ['select', 'rank_auth', '浏览权限', '', RoleModel::getTree(null, '开放浏览')],
  18.                 ['radio', 'status', '立即启用', '', ['否', '是']],
  19.                 ['text', 'sort', '排序'],
  20.             ])
  21.             ->setFormData($info)
  22.             ->fetch();

不同分辨率下设置不同的宽度

从1.3.0开始支持

屏幕类型值
超小屏幕手机 (<768px)xs
小屏幕平板 (≥768px)sm
中等屏幕桌面 (≥992px)md
大屏幕桌面 (≥1200px)lg

格式：

  1. ->layout(['字段名'   => 'xs|sm|md|lg'])

如：

  1. ->layout(['pid' => '6|4|8|12'])

或

  1. ->addFormItems([
  2.     ['select:6|4|8|12', 'pid', '所属栏目'],
  3. ])

表示在大屏幕桌面占12格，中等屏幕桌面占8，小屏幕平板占4格，超小屏幕手机6。

  1. ->layout(['pid'   => '6'])

或

  1. ->addFormItems([
  2.     ['select:6', 'pid', '所属栏目'],
  3. ])

表示所有分辨率下，都占6格。

默认不填写则以第一个参数为准。

  1. ->layout(['pid'   => '6|||8'])

或

  1. ->addFormItems([
  2.     ['select:6|||8', 'pid', '所属栏目'],
  3. ])

表示超小屏幕手机、小屏幕平板、中等屏幕桌面占6格，大屏幕桌面占8格。